<!--
## 3.6. 【ref 对比 reactive】

宏观角度看：

> 1. `ref`用来定义：**基本类型数据**、**对象类型数据**；
>
> 2. `reactive`用来定义：**对象类型数据**。

- 区别：

> 1. `ref`创建的变量必须使用`.value`（可以使用`volar`插件自动添加`.value`）。
>
> 2. `reactive`重新分配一个新对象，会**失去**响应式（可以使用`Object.assign`去整体替换）。

- 使用原则：

> 1. 若需要一个基本类型的响应式数据，必须使用`ref`。
> 2. 若需要一个响应式对象，层级不深，`ref`、`reactive`都可以。
> 3. 若需要一个响应式对象，且层级较深，推荐使用`reactive`。
-->
<template>
  <div class="person1">
    <h2>汽车信息：一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <br/>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="item in games"
          :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏的名字</button>
  </div>
</template>

<script setup lang="ts" name="Person1">
import {reactive} from "vue";

// 数据
const car: { brand: string, price: number; } = reactive({
  brand: '奔驰',
  price: 100
});

const games: { id: string, name: string; }[] = reactive([
  {id: '001', name: '王者荣耀'},
  {id: '002', name: '原神'},
  {id: '003', name: '崩坏'}
]);

// 方法
const changePrice = (): void => {
  car.price += 10
};

const changeFirstGame = (): void => {
  games[0].name = '三国';
};
</script>

<style lang="scss" scoped>
.person1 {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

  button {
    margin: 0 5px;
  }

  li {
    font-size: 20px;
  }
}
</style>
